import 'dart:math';

import 'package:aone_common/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
import 'package:get/get.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:intl/intl.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.put<LoginPageController>(
      LoginPageController(
        'd1bfd0a8fc46482cad6dc6816fe434be',
        'popup',
      ),
    );

    const genderOptions = ['male', 'female'];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Login'),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20.0.h, vertical: 30.0.h),
        child: SingleChildScrollView(
          child: FormBuilder(
            key: logic.loginGlobalKey,
            child: Column(
              children: [
                FormBuilderTextField(
                  name: 'username',
                  decoration: InputDecoration(
                    labelText: 'Username',
                  ),
                  validator: FormBuilderValidators.compose([
                    FormBuilderValidators.required(context),
                    FormBuilderValidators.minLength(context, 5),
                  ]),
                ),
                FormBuilderFilterChip(
                  name: 'filter_chip',
                  decoration: InputDecoration(
                    labelText: 'Select many options',
                  ),
                  options: [
                    FormBuilderFieldOption(value: 'Test', child: Text('Test')),
                    FormBuilderFieldOption(
                        value: 'Test 1', child: Text('Test 1')),
                    FormBuilderFieldOption(
                        value: 'Test 2', child: Text('Test 2')),
                    FormBuilderFieldOption(
                        value: 'Test 3', child: Text('Test 3')),
                    FormBuilderFieldOption(
                        value: 'Test 4', child: Text('Test 4')),
                  ],
                ),
                FormBuilderChoiceChip(
                  name: 'choice_chip',
                  decoration: InputDecoration(
                    labelText: 'Select an option',
                  ),
                  options: [
                    FormBuilderFieldOption(value: 'Test', child: Text('Test')),
                    FormBuilderFieldOption(
                        value: 'Test 1', child: Text('Test 1')),
                    FormBuilderFieldOption(
                        value: 'Test 2', child: Text('Test 2')),
                    FormBuilderFieldOption(
                        value: 'Test 3', child: Text('Test 3')),
                    FormBuilderFieldOption(
                        value: 'Test 4', child: Text('Test 4')),
                  ],
                ),
                FormBuilderDateTimePicker(
                  name: 'date',
                  // onChanged: _onChanged,
                  inputType: InputType.time,
                  decoration: InputDecoration(
                    labelText: 'Appointment Time',
                  ),
                  initialTime: TimeOfDay(hour: 8, minute: 0),
                  // initialValue: DateTime.now(),
                  // enabled: true,
                ),
                FormBuilderDateRangePicker(
                  name: 'date_range',
                  firstDate: DateTime(1970),
                  lastDate: DateTime(2030),
                  format: DateFormat('yyyy-MM-dd'),
                  decoration: InputDecoration(
                    labelText: 'Date Range',
                    helperText: 'Helper text',
                    hintText: 'Hint text',
                  ),
                ),
                FormBuilderSlider(
                  name: 'slider',
                  validator: FormBuilderValidators.compose([
                    FormBuilderValidators.min(context, 6),
                  ]),
                  min: 0.0,
                  max: 10.0,
                  initialValue: 7.0,
                  divisions: 20,
                  activeColor: Colors.red,
                  inactiveColor: Colors.pink[100],
                  decoration: InputDecoration(
                    labelText: 'Number of things',
                  ),
                ),
                FormBuilderCheckbox(
                  name: 'accept_terms',
                  initialValue: false,
                  title: RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: 'I have read and agree to the ',
                          style: TextStyle(color: Colors.black),
                        ),
                        TextSpan(
                          text: 'Terms and Conditions',
                          style: TextStyle(color: Colors.blue),
                        ),
                      ],
                    ),
                  ),
                  validator: FormBuilderValidators.equal(
                    context,
                    true,
                    errorText:
                    'You must accept terms and conditions to continue',
                  ),
                ),
                FormBuilderTextField(
                  name: 'age',
                  decoration: InputDecoration(
                    labelText:
                    'This value is passed along to the [Text.maxLines] attribute of the [Text] widget used to display the hint text.',
                  ),
                  // valueTransformer: (text) => num.tryParse(text),
                  validator: FormBuilderValidators.compose([
                    FormBuilderValidators.required(context),
                    FormBuilderValidators.numeric(context),
                    FormBuilderValidators.max(context, 70),
                  ]),
                  keyboardType: TextInputType.number,
                ),
                FormBuilderDropdown(
                  name: 'gender',
                  decoration: InputDecoration(
                    labelText: 'Gender',
                  ),
                  // initialValue: 'Male',
                  allowClear: true,
                  hint: Text('Select Gender'),
                  validator: FormBuilderValidators.compose(
                      [FormBuilderValidators.required(context)]),
                  items: genderOptions
                      .map((gender) => DropdownMenuItem(
                    value: gender,
                    child: Text('$gender'),
                  ))
                      .toList(),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: MaterialButton(
                        color: Theme.of(context).colorScheme.secondary,
                        child: Text(
                          "Submit",
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {
                          logic.loginGlobalKey.currentState!.save();
                          if (logic.loginGlobalKey.currentState!.validate()) {
                            print(logic.loginGlobalKey.currentState!.value);
                          } else {
                            print("validation failed");
                          }
                        },
                      ),
                    ),
                    SizedBox(width: 20),
                    Expanded(
                      child: MaterialButton(
                        color: Theme.of(context).colorScheme.secondary,
                        child: Text(
                          "Reset",
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {
                          logic.loginGlobalKey.currentState!.reset();
                        },
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
          // child: Form(
          //   key: logic.loginGlobalKey,
          //   child: Column(
          //     children: [
          //       TextFormField(
          //         controller: logic.usernameController,
          //         decoration: InputDecoration(
          //           hintText: 'login.username'.tr,
          //         ),
          //         keyboardType: TextInputType.text,
          //         onChanged: (value) => logic.username.value = value,
          //       ),
          //       TextFormField(
          //         controller: logic.passwordController,
          //         obscureText: true,
          //         onChanged: (value) => logic.password.value = value,
          //         keyboardType: TextInputType.visiblePassword,
          //         decoration: InputDecoration(
          //           hintText: 'login.password'.tr,
          //         ),
          //       ),
          //       Row(
          //         children: [
          //           Obx(() => Checkbox(
          //                 value: logic.rememberMe.value,
          //                 onChanged: logic.toggleRemember,
          //               )),
          //           Text('login.remember.me'.tr),
          //         ],
          //       ),
          //       ElevatedButton(
          //           onPressed: logic.captchaPlugin.showCaptcha,
          //           child: Text('login'.tr)),
          //       TextButton(
          //         onPressed: () {
          //           Get.offAndToNamed(Routes.home);
          //         },
          //         child: const Text('back to Home'),
          //       ),
          //     ],
          //   ),
          // ),
        ),
      ),
    );
  }
}
